<template>
    <el-tree-v2 ref="treeRef" style="width: 100%"
                :props="{value:'id',label:'title'}"
                show-checkbox
                @check-change="checkChange"
                :height="300" />
</template>

<script setup lang="ts">
import {nextTick, onBeforeMount, onMounted, ref} from "vue";
import {ElTreeV2} from "element-plus";
import {simpleGet} from "@/utils/request";

const props = withDefaults(defineProps<{
    modelValue?: any[],
    url: string,
}>(), {

})
const emits = defineEmits(['update:modelValue'])

const treeRef = ref<InstanceType<typeof ElTreeV2>>()

const checkChange = () => {
    const rules = [...treeRef.value!.getCheckedKeys(), ...treeRef.value!.getHalfCheckedKeys()]
    emits("update:modelValue", rules)
}

onMounted(async () => {
    const {options} = await simpleGet('/site.siteRule/options')
    treeRef.value!.setData(options)
    nextTick().then(r => {
        props.modelValue?.forEach((key:any) => {
            key = Number(key)
            const node  = treeRef.value!.getNode(key)
            if (node?.isLeaf){
                treeRef.value!.setChecked(key, true)
            }
        })
    })
})

</script>

<style scoped>

</style>
